<template>
    <div>
        <el-form :model="formData" label-position="right" label-width="80px">
            <el-divider content-position="left">基础信息1</el-divider>
            <el-form-item label="发布企业:">
                {{formData.buy_user.name}}
            </el-form-item>
            <el-form-item label="发布时间">
                {{formData.CreatedAt|formatDate}}
            </el-form-item>
            <el-form-item label="审核状态">
                <div v-for="item in statusOptions" v-if="item.value == formData.status">
                    {{ item.label }}
                </div>

            </el-form-item>
            <el-divider content-position="left">基础信息2</el-divider>
            <el-form-item label="项目名称:">
                <el-select clearable filterable v-model="formData.projectId" placeholder="请选择">
                    <el-option
                            v-for="item in projectList"
                            :key="item.ID"
                            :label="item.proName"
                            :value="item.ID"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="采购清单名称:">
                <el-input v-model="formData.name" clearable placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="自有采购单编号:">
                <el-input v-model="formData.userSn" clearable placeholder="请输入"></el-input>
            </el-form-item>


            <el-divider content-position="left">采购材料需求清单：</el-divider>
            <el-table
                    :data="formData.user_order_detail"
                    stripe
                    border
                    row-key="ID"
                    style="width: 100%"
            >
                <el-table-column label="行业">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.cWork" clear placeholder="请选择">
                            <el-option
                                    v-for="item in cTypeList"
                                    v-if="item.pid === 0"
                                    :key="item.ID"
                                    :label="item.name"
                                    :value="item.ID"
                            />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="品类">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.cProduct" clear placeholder="请选择">
                            <el-option
                                    v-for="item in cTypeList"
                                    v-if="item.pid !== 0"
                                    :key="item.ID"
                                    :label="item.name"
                                    :value="item.ID"
                            />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="商品名">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.name" clearable placeholder="请输入"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="品牌或厂家">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.brand" clearable placeholder="请输入"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="规格或型号">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.norms" clearable placeholder="请输入"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="采购量">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.buyNumber" clearable placeholder="请输入"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="单位">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.unit" clearable placeholder="请输入"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="单价（单位：元）">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.perPrice" clearable placeholder="请输入"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        align="center"
                >
                    <template slot-scope="scope">
                        <el-button type="primary" style="margin-bottom: 12px;">保存</el-button>
                    </template>
                </el-table-column>
            </el-table>


            <el-divider content-position="left">采购方信息：</el-divider>
            <el-form-item label="收货地区:">
                <el-input v-model="formData.getAddress" clearable placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="采购说明:">
                <el-input type="textarea" v-model="formData.desc" clearable placeholder="请输入"></el-input>
            </el-form-item>

            <el-form-item label="采购说明图片:">
                <Upload v-model="formData.descPic"/>
            </el-form-item>
            <el-form-item label="收货日期:">
                <el-date-picker
                        v-model="formData.getDate"
                        align="right"
                        type="date"
                        placeholder="选择日期"
                >
                </el-date-picker>
                <!--            <el-input v-model="formData.getDate" clearable placeholder="请输入" ></el-input>-->
            </el-form-item>
            <el-form-item label="交易方式:">
                <el-radio v-model="formData.payType" label="1">项目信用支付</el-radio>
                <el-radio v-model="formData.payType" label="2">自有资金现款现货</el-radio>
                <el-radio v-model="formData.payType" label="3">自有资金货到付款</el-radio>
            </el-form-item>

            <el-form-item label="报价形式:">
                <el-radio v-model="formData.buType" label="1">报价含税</el-radio>
                <el-radio v-model="formData.buType" label="2">报价含运费</el-radio>

                <!--                 <el-input v-model="formData.buType" clearable placeholder="请输入" ></el-input>-->
            </el-form-item>

            <el-form-item label="采购企业联系人:">
                <el-input v-model="formData.buyContaxt" clearable placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="采购企业手机号:">
                <el-input v-model="formData.buyPhone" clearable placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="采购方合同图片:">
                <Upload v-model="formData.buyContract"/>
            </el-form-item>
            <el-form-item label="收货凭证:">
                <el-table
                        :data="formData.user_order_get_pic"
                        stripe
                        border
                        row-key="ID"
                        style="width: 100%"
                >
                    <el-table-column>
                        <template slot-scope="scope">
                            <img style="max-height: 50px;" :src="scope.row.pic" />
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <el-divider content-position="left">供应方信息：</el-divider>
            <el-form-item label="供应企业:">
                <el-select clearable filterable v-model="formData.sellerId" placeholder="请选择">
                    <el-option
                            v-for="item in userList"
                            :key="item.ID"
                            :label="item.name"
                            :value="item.ID"
                    />
                </el-select>

            </el-form-item>
            <el-form-item label="供应企业联系人:">
                <el-input v-model="formData.sellContaxt" clearable placeholder="请输入"></el-input>
            </el-form-item>

            <el-form-item label="供应企业联系人手机号:">
                <el-input v-model="formData.sellPhone" clearable placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="供应企业备注:">
                <el-input type="textarea" v-model="formData.sellDesc" clearable placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="供应方交易图片:">
                <Upload v-model="formData.sellContract"></Upload>
            </el-form-item>
            <el-form-item label="发货凭证:">
                <el-table
                        :data="formData.user_order_send_pic"
                        stripe
                        border
                        row-key="ID"
                        style="width: 100%"
                >
                    <el-table-column>
                        <template slot-scope="scope">
                            <img style="max-height: 50px;" :src="scope.row.pic" />
                        </template>
                    </el-table-column>
                </el-table>
                </el-table>
            </el-form-item>
            <el-divider content-position="left">后台管理信息：</el-divider>
            <el-form-item label="是否发布到求购大厅:">
                <el-switch active-color="#13ce66" inactive-color="#ff4949" active-text="是" inactive-text="否"
                           v-model="formData.isPublic" clearable></el-switch>
            </el-form-item>
            <el-form-item label="支付记录:">
                <el-button type="primary" style="margin-bottom: 12px;" @click="addPay">新增支付记录</el-button>
                <el-table
                        :data="formData.user_order_pay"
                        stripe
                        border
                        row-key="ID"
                        style="width: 100%"
                >
                    <el-table-column label="期数">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.number"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="时间">
                        <template slot-scope="scope">
                            <el-date-picker
                                    v-model="scope.row.payTime"
                                    align="right"
                                    type="date"
                                    placeholder="选择日期"
                            >
                            </el-date-picker>
                        </template>
                    </el-table-column>
                    <el-table-column label="收款方">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.getName"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="付款方">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.payName"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="金额">
                        <template slot-scope="scope">
                            <el-input-number v-model="scope.row.money" :precision="2" clearable></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column label="图片凭证">
                        <template slot-scope="scope">
                            <Upload v-model="scope.row.payPic"></Upload>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作人">
                        <template slot-scope="scope">
                            {{scope.row.sys_user.nickName}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            align="center"
                    >
                        <template slot-scope="scope">
                            <el-button type="primary" style="margin-bottom: 12px;"
                                       @click="save_user_order_pay(scope.row)">保存
                            </el-button>
<!--                            <el-button type="warning" style="margin-bottom: 12px;" @click="delete_user_order_pay(scope.row)" >删除</el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>


            <el-form-item label="状态">
                <el-select clearable v-model="formData.status" placeholder="请选择">
                    <el-option
                            v-for="item in statusOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    />

                </el-select>
            </el-form-item>


            <el-form-item>
                <el-button @click="save" type="primary">保存</el-button>
                <el-button @click="back" type="primary">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {
        createUserOrderPay,
        deleteUserOrderPay,
        deleteUserOrderPayByIds,
        updateUserOrderPay,
        findUserOrderPay,
        getUserOrderPayList
    } from "@/api/userOrderPay";  //  此处请自行替换地址
    import Upload from '@/components/upload/image'
    import {
        getUserProjectList
    } from '@/api/userProject' //  此处请自行替换地址
    import {getUsersList} from '@/api/users'
    import {
        createUserOrder,
        updateUserOrder,
        findUserOrder
    } from "@/api/userOrder";  //  此处请自行替换地址
    import infoList from "@/mixins/infoList";
    import {formatTimeToStr} from "@/utils/date";
    import {getCTypesList} from "@/api/cTypes";
    import {mapGetters} from "vuex";

    export default {
        name: "UserOrder",
        mixins: [infoList],
        computed: {
            ...mapGetters('user', ['userInfo', 'token'])
        },
        components: {
            Upload
        },
        data() {
            return {
                cTypeList: [],
                projectList: [],
                userList: [],
                statusOptions: [
                    {
                        value: 1,
                        label: '1:待审核'
                    }, {
                        value: 2,
                        label: '2:驳回'
                    }, {
                        value: 3,
                        label: '3:待报价，双方上传合同'
                    },
                    {
                        value: 4,
                        label: '4:待合同审核'
                    },
                    {
                        value: 5,
                        label: '5:待平台上传付款凭证'
                    },
                    {
                        value: 6,
                        label: '6:双方上传收发货凭证'
                    },
                    {
                        value: 7,
                        label: '7:待平台收发货凭证审核'
                    },
                    {
                        value: 8,
                        label: '8:订单完成'
                    }
                ],
                type: "",
                formData: {
                    buType: "",
                    buyContaxt: "",
                    buyContract: "",
                    buyId: 0,
                    buyPhone: "",
                    desc: "",
                    descPic: "",
                    getAddress: "",
                    getDate: "",
                    isPublic: false,
                    name: "",
                    orderSn: "",
                    payType: "",
                    projectId: "",
                    sellContaxt: "",
                    sellContract: "",
                    sellDesc: "",
                    sellPhone: "",
                    sellerId: 0,
                    status: 0,
                    userSn: "",

                }
            };
        },
        filters: {
            formatDate: function (time) {
                if (time != null && time != "") {
                    var date = new Date(time);
                    return formatTimeToStr(date, "yyyy-MM-dd hh:mm:ss");
                } else {
                    return "";
                }
            },
            formatBoolean: function (bool) {
                if (bool != null) {
                    return bool ? "是" : "否";
                } else {
                    return "";
                }
            }
        },
        methods: {
            addPay(){
                // const user_order_pay = this.formData.user_order_pay
                this.formData.user_order_pay.push({
                    ID:0,
                    doneUser:0,
                    getName:"",
                    money:0,
                    number:this.formData.user_order_pay.length+1,
                    orderId:this.formData.ID,
                    payName:"",
                    payPic:"",
                    payTime:"",
                    sys_user:this.userInfo,
                })
                console.log(this.formData.user_order_pay)

            },
            async delete_user_order_pay(row){
                console.log(this.formData.user_order_pay)
            },
            async save_user_order_pay(row) {
                row.doneUser = this.userInfo.ID
                if (row.ID !== 0) {
                    const res = await updateUserOrderPay(row)
                } else {
                    const res = await createUserOrderPay(row)
                }
            },
            async save() {
                let res;
                switch (this.type) {
                    case "create":
                        res = await createUserOrder(this.formData);
                        break;
                    case "update":
                        res = await updateUserOrder(this.formData);
                        break;
                    default:
                        res = await createUserOrder(this.formData);
                        break;
                }
                if (res.code == 0) {
                    this.$message({
                        type: "success",
                        message: "创建/更改成功"
                    })
                }
            },
            back() {
                this.$router.go(-1)
            }
        },
        async created() {
            var cTypesList = await getCTypesList({page: 1, pageSize: 10000})
            this.cTypeList = cTypesList.data.list
            var userlist = await getUsersList({page: 1, pageSize: 1000000})
            this.userList = userlist.data.list
            var userProject = await getUserProjectList({page: 1, pageSize: 100000})
            this.projectList = userProject.data.list
            // 建议通过url传参获取目标数据ID 调用 find方法进行查询数据操作 从而决定本页面是create还是update 以下为id作为url参数示例
            if (this.$route.query.id) {
                const res = await findUserOrder({ID: this.$route.query.id})
                if (res.code == 0) {
                    this.formData = res.data.reuserOrder
                    this.type = "update"
                }
            } else {
                this.type = "create"
            }

        }
    };
</script>

<style>
</style>